<template>
  <div>
    <el-card v-for="(n, i) in notices" :key="n.noticeId" class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ n.noticeTitle }}</span>
        <span v-if="personal">
          <el-button v-if="n.markedRead === '0'" style="float: right; padding: 3px 0" type="text" @click="markRead(n.noticeId)">标为已读</el-button>
          <span v-else style="float: right; padding: 3px 0" type="text">已读</span>
        </span>
      </div>
      <div class="foo">
        <div class="text item" v-html="n.noticeContent">
        </div>
      </div>

    </el-card>
    <el-button class="btn" :loading="loading" :disabled="btnDisable" @click="loadPersonNotice">加载更多</el-button>
    <el-button v-if="personal" :loading="readLoading" class="btn" @click="readAll">全部已读</el-button>
  </div>
</template>

<script>
  import {getPersonNoticeByUserId, markNoticeRead, getPublicNotice, readAll} from '@/api/system/notice'
  export default {
    name: "personNotice",
    props: {
      user: {
        type: Object
      },
      personal: {
        type: Boolean
      }
    },
    data() {
        return {
          // currentUserId: this.userId,
          // noticeType: this.personal,
          notices: [],
          loading: false,
          readLoading: false,
          btnDisable: false,
          queryParams: {
            pageNum: 1,
            pageSize: 5,
          },
        }
    },
    created() {
      this.reset();
      this.loadPersonNotice();
    },
    methods: {
      markRead(id) {
        markNoticeRead(this.user.userId, id).then(res => {
          for(let i = 0; i < this.notices.length; i++) {
            if(this.notices[i].noticeId === id) {
              this.notices[i].markedRead = '1';
              break;
            }
          }
          this.$store.dispatch('personNoticeCountSubOne');
        })
      },

      /**
       * 读取所有消息
       */
      readAll() {
        this.readLoading = true;
        readAll(this.user.userId).then(res => {
          for(let i = 0; i < this.notices.length; i++) {
            this.notices[i].markedRead = '1';
          }
          this.readLoading = false;
          this.$store.dispatch('personNoticeCountClear');
        });
      },

      loadPersonNotice() {
        this.loading = true;
        if(this.personal) {
          getPersonNoticeByUserId(this.user.userId, this.queryParams).then(this.handleRes);
        } else {
          getPublicNotice(this.queryParams).then(this.handleRes);
        }

      },

      handleRes(res) {
        this.notices.push(...res.data.rows);
        if(this.notices.length === res.data.total) {
          this.btnDisable = true;
        }
        this.queryParams.pageNum += 1;
        this.loading = false;
      },
      reset() {
        this.pageNum = 1;
        this.notices = [];
        this.loading = false;
      }
    }

  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item >>> p {
    margin-bottom: 18px;
  }

  .foo {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    margin: 20px;
    padding: 10px;

  }
</style>
